<!-- src/views/warehousing/alreadyListed/alreadyListed.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import { getUpPageApi } from '@/api/warehousingEntryUp'

const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const entryDetailsList = ref([])
const searchForm = ref({
  status: 6  // 默认状态设置为6（已上架）
})

const handleSearch = () => {
  page.value = 1
  getEntryDetailsPage()
}

const reset = () => {
  searchForm.value.batchNumber = ''
  getEntryDetailsPage()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getEntryDetailsPage()
}

const handleCurrentChange = (val) => {
  page.value = val
  getEntryDetailsPage()
}

const getEntryDetailsPage = async () => {
  // 传递状态参数给后端接口
  const res = await getUpPageApi(page.value, pageSize.value, searchForm.value.status)
  entryDetailsList.value = res.data.rows
  totalSize.value = res.data.total
}

const formatStatus = (status) => {
  const statusMap = {
    1: '未到货',
    2: '已到货',
    3: '已卸货',
    4: '分拣中',
    5: '已上架',
    6: '已上架'
  }
  return statusMap[status] || '未知状态'
}

onMounted(() => {
  getEntryDetailsPage()  
})
</script>

<template>
  <div class="already-listed-container">
    <div class="search-toolbar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="批次号">
          <el-input 
            v-model="searchForm.batchNumber" 
            placeholder="请输入" 
            clearable 
            style="width: 180px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
          <el-button icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table 
      :data="entryDetailsList" 
      style="width: 100%; margin-top: 20px;"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="code" label="商品编码" min-width="120" />
      <el-table-column prop="title" label="商品名称" min-width="150" />
      <el-table-column prop="batchNumber" label="批次号" min-width="120" />
      <el-table-column prop="consignorName" label="货主" min-width="100" />
      <el-table-column prop="supplierName" label="供应商" min-width="120" />
      <el-table-column prop="realArrivalTime" label="实际到达时间" min-width="160" />
      <el-table-column prop="count" label="数量" min-width="80" align="center" />
      <el-table-column prop="warehouseName" label="仓库" min-width="100" />
      <el-table-column prop="warehouseAreaName" label="库区" min-width="100" />
      <el-table-column prop="warehouseAreaLocaName" label="库位" min-width="100" />
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-tag type="success">{{ formatStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </div>
  </div>
</template>

<style scoped>
.already-listed-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.search-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 15px;
}

.search-form :deep(.el-form-item__label) {
  font-weight: normal;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .search-toolbar {
    justify-content: center;
  }
  
  .search-form {
    flex-wrap: wrap;
  }
  
  .search-form :deep(.el-form-item) {
    margin-bottom: 10px;
  }
  
  .el-table :deep(.el-table__column-filter-trigger) {
    display: none;
  }
}
</style>